layui.use(['table', 'laydate', 'form'], function () {
    let table = layui.table;
    let form = layui.form;
    let laydate = layui.laydate;

    //执行一个laydate实例
    laydate.render({
        elem: '#start' //指定元素
    });


    //执行一个laydate实例
    laydate.render({
        elem: '#end' //指定元素
    });

    // 创建渲染实例
    // 下面的代码理解为对ajax的封装
    tableRender({
        username: '',
        email: '',
        start: '',
        end: '',
        hobby: '',
        sex: '',
        phone: ''
    });
    //触发单元格工具事件
    // table.on('tool(table)', function (obj) { // 双击 toolDouble
    //     let data = obj.data;
    //     console.log(data);
    //     if (obj.event === 'del') {
    //         layer.confirm('真的删除行么', function (index) {
    //             layer.confirm('是否已经确定真的删除行么', function (index) {
    //                 let res = myAjax("/back/user/delete", {id: data.id}, "post");
    //                 // res是否有值，如果没有，则提示失败
    //                 if (res != null && res.count > 0) {
    //                     obj.del();
    //                     layer.close(index);
    //                 } else {
    //                     layer.msg("删除失败");
    //                 }
    //             });
    //
    //         });
    //     } else if (obj.event === 'edit') {
    //         sessionStorage.setItem("userId", data.id);
    //         xadmin.open('编辑用户', '/html/user/user-edit.html', 600, 400)
    //         // layer.open({
    //         //     title: '编辑',
    //         //     type: 1,
    //         //     area: ['80%', '80%'],
    //         //     content: '<div style="padding: 16px;">自定义表单元素</div>'
    //         // });
    //     } else if (obj.event === 'password') {
    //         layer.open({
    //             title: '密码修改',
    //             type: 1,
    //             area: ['80%', '80%'],
    //             content: '<div style="padding: 16px;">自定义表单元素</div>'
    //         });
    //     }
    // });

    function tableRender(data) {
        table.render({
            elem: '#table'//js#一般对应id
            , url: '/back/user/all' // 此处为静态模拟数据，实际使用时需换成真实接口
            // , height: 'full-200' // 最大高度减去其他容器已占有的高度差
            // , cellMinWidth: 80
            , page: true//开启分页
            , where: data
            , cols: [[
                // field 后端传递给前端的属性：dto
                {field: 'id', fixed: 'left', title: 'ID', sort: true}
                , {field: 'username', title: '用户名'}
                , {
                    field: 'email',
                    title: '邮箱 <i class="layui-icon layui-icon-email"></i>',
                    hide: 0,

                    edit: 'text'
                }
                // , {field: 'sex', width: 80, title: '性别', sort: true, templet: '#switchTpl'}
                , {
                    field: 'sex',

                    title: '性别',
                    sort: true,
                    templet: '<div>{{d.sex==undefined?\'保密\':d.sex}}</div>'
                }

                , {field: 'phone', title: '手机号'}
                , {field: 'birthday', title: '生日', sort: true}
                , {field: 'hobby', title: '爱好'}
                , {
                    field: 'enable', title: '启用停用', templet: function (d) {
                        return d.enable == 1 ? '启用' : '停用'
                    }
                }
                , {fixed: 'right', title: '操作', width: 220, toolbar: '#barDemo'}
            ]]
        })
    }

    form.on('submit(sreach)', function (data) {
        data = data.field;
        let hobbys = [];
        $("input[type=checkbox][name=hobby]:checked").each(function (index, data) {

            hobbys.push(data.title);
        })
        data.hobby = hobbys.toLocaleString();
        // console.log(data);
        tableRender(data);
        return false;
    })

});